<template>
  <el-dialog :title="formModel.id?'修改':'新增'"
             :visible.sync="visible"
             append-to-body
             size="70%"
             :before-close="handleClose">
    <basic-container>
      <avue-form v-if="visible" ref="avueForm" :option="option" v-model="formModel" @submit="submit"></avue-form>
    </basic-container>
  </el-dialog>

</template>

<script>

import menuOption from "@/option/sys/menuOption";
import {add, updateRow} from "@/api/sys/menuApi"

const formOption = menuOption();
export default {
  name: "editor",
  computed: {
    option() {
      return formOption;
    }
  },
  watch: {
    'formModel.type'(val) {
      let column = this.$refs.avueForm.option.column;
      let icon = this.findObject(column, 'icon');
      let component = this.findObject(column, 'component');
      let path = this.findObject(column, 'path');
      component.display = val !== 1
      component.editDisplay = component.display
      icon.display = val !== 1
      icon.editDisplay = icon.display
      path.display = val !== 1
      path.editDisplay = path.display
    }
  },
  data() {
    return {
      visible: false,
      formModel: {},
    }
  },
  methods: {
    show(row) {
      if (!row) {
        row = {};
      }
      row.children = null;
      this.formModel = row;
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
      this.formModel = {};
    },
    submit(val, done) {
      let fun = null;
      val.children = null;
      if (val.id) {
        fun = updateRow
      } else {
        fun = add
      }
      fun(val).then(res => {
        this.handleClose();
        this.$emit("change")
      }).finally(() => {
        done();
      })
    }
  }
}
</script>

<style scoped>

</style>